<script setup>
import { inject } from "vue";
import { Plus } from "@element-plus/icons-vue";
import useWebsite from "./Search/useWebsite";
const { setIsShow } = inject("dialogShow");
const { value, search } = useWebsite();
</script>

<template>
  <div class="search">
    <el-button
      type="primary"
      class="button"
      @click="setIsShow(true)"
      :icon="Plus">
    </el-button>
    <el-input
      class="input"
      type="text"
      placeholder="请输入关键字"
      v-model="value"
      @input="search" />
  </div>
</template>

<style lang="scss" scoped>
.search {
  height: 60px;
  background-color: #d3d3d3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 0 10px;
  .button {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    font-size: 30px;
  }
  .input {
    flex: 1;
    padding-left: 10px;
  }
}
</style>
